package com.example.mysports.ui

import androidx.annotation.StringRes
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ArrowBack
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
import androidx.compose.material3.windowsizeclass.WindowWidthSizeClass
import androidx.compose.runtime.Composable
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.mysports.R
import com.example.mysports.ui.theme.MySportsTheme

@Composable
fun SportApp(
    windowSize: WindowWidthSizeClass,
    modifier: Modifier = Modifier
) {
    val viewModel: SportViewModel = viewModel()
    val sportUiState = viewModel.uiState.collectAsState().value

    Scaffold(
        modifier = modifier,
        topBar = {
            SportAppTopBar(
                title = if (sportUiState.isShowingHomepage) {
                    R.string.app_name
                } else {
                    R.string.sports_info
                },
                canNavigateBack = !sportUiState.isShowingHomepage,
                navigateUp = { viewModel.resetHomeScreenStates() }
            )
        }
    ) { intentPadding ->
        if (windowSize == WindowWidthSizeClass.Expanded) {
            SportListAndDetails(
                sportUiState = sportUiState,
                onCardClick = { sport ->
                    viewModel.updateCurrentSport(sport)
                },
                contentPadding = intentPadding
            )
        } else {
            if (sportUiState.isShowingHomepage) {
                SportList(
                    sportUiState = sportUiState,
                    onCardClick = { sport ->
                        viewModel.updateCurrentSport(sport)
                    },
                    modifier = Modifier.padding(intentPadding)
                )
            } else {
                SportDetails(sport = sportUiState.currentSport, contentPadding = intentPadding)
            }
        }
    }
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun SportAppTopBar(
    @StringRes title: Int,
    canNavigateBack: Boolean,
    navigateUp: () -> Unit,
    modifier: Modifier = Modifier
) {
    TopAppBar(
        title = { Text(text = stringResource(id = title)) },
        modifier = modifier,
        navigationIcon = {
            if (canNavigateBack) {
                IconButton(onClick = navigateUp) {
                    Icon(
                        imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                        contentDescription = stringResource(id = R.string.top_back_button)
                    )
                }
            }
        },
        colors = TopAppBarDefaults.topAppBarColors(
            containerColor = MaterialTheme.colorScheme.primary,
            titleContentColor = MaterialTheme.colorScheme.onPrimary,
            navigationIconContentColor = MaterialTheme.colorScheme.onPrimary,
            actionIconContentColor = MaterialTheme.colorScheme.onPrimary
        )
    )
}

@Preview(showBackground = true)
@Composable
fun SportAppCompactPreview() {
    MySportsTheme {
        SportApp(windowSize = WindowWidthSizeClass.Compact)
    }
}

@Preview(showBackground = true, widthDp = 1000)
@Composable
fun SportAppExpandedPreview() {
    MySportsTheme {
        SportApp(windowSize = WindowWidthSizeClass.Expanded)
    }
}